<template>
  <div class="x-search">
    <template v-for="f in form">
      <div v-platform="f.field != 'serviceOrgName'" class="x-left x-row x-pb-10" :style="handlerFormStyle(f)">
        <div class="title">{{ f.title }}</div>
        <div :style="{width: `calc(100% - ${f.title.length * 14}px)`}" class="x-pr-5 x-pl-5">
          <x-select v-if="!$empty(f.options)" :type="f.optionsType? f.optionsType: 'dict'" :options="f.options" v-model="formData[f.field]"></x-select>
          <el-date-picker style="width: 90%" v-else-if="['date', 'datetime'].indexOf(f.type) > -1"
                          :placeholder="f.placeholder" :value-format="handlerValueFormat(f)" v-model="formData[f.field]"
                          :type="f.type"></el-date-picker>

          <div class="x-row" v-else-if="['dateRange', 'datetimeRange'].indexOf(f.type) > -1">
            <el-date-picker style="width: 45%" :placeholder="f.mapper[0].placeholder"
                            :value-format="handlerValueFormat(f)" v-model="formData[f.mapper[0].field]"
                            :type="f.type.substring(0, f.type.length - 5)"></el-date-picker>
            <div class="x-pl-5 x-pr-5">-</div>
            <el-date-picker style="width: 45%" :placeholder="f.mapper[1].placeholder"
                            :value-format="handlerValueFormat(f)" v-model="formData[f.mapper[1].field]"
                            :type="f.type.substring(0, f.type.length - 5)"></el-date-picker>
          </div>

          <el-input v-else v-model="formData[f.field]" :placeholder="f.placeholder"></el-input>
        </div>
      </div>
    </template>
    <div v-if="! $emptyArray(form)" class="x-pl-5 x-left item">
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button @click="onReset">重置</el-button>
    </div>
    <div class="clear-fix"></div>
  </div>
</template>
<script setup name="x-search">
import XSelect from '@/components/lib/Select'

let form = ref([]);
let formData = ref({});
let emit = defineEmits(['search']);

const props = defineProps({
  columns: {
    type: Array,
    default: () => {
      return [];
    }
  }
})

const setForm = (value = []) => {
  form.value = value;
  if (Helper.emptyArray(value)) {
    return;
  }

  for (let i = 0; i < value.length; i++) {
    let item = value[i];
    if (!Helper.emptyArray(item.mapper)) {
      item.mapper.forEach(m => {
        if (m.value) {
          formData.value[m.field] = m.value;
        }
      })
      continue;
    }

    let v = item.value;
    if (! Helper.empty(v)) {
      formData.value[item.field] = v;
    }
  }
}

const onSubmit = () => {
  emit('search', Helper.clearEmpty(formData.value));
}

const onReset = () => {
  formData.value = convert();
  emit('search', Helper.clearEmpty(formData.value));
}

const convert = () => {
  let data = {};
  form.value.forEach(f => {
    data[f.field] = f.value ? f.value : null;
  });
  return data;
}

const getFormData = () => {
  return Helper.clearEmpty(formData.value);
}

const handlerFormStyle = (f) => {
  let style = {};

  if (f.width) {
    style.width = f.width;
    return style;
  }

  if (f.type && f.type.indexOf('Range') > -1) {
    style.width = '440px';
  } else {
    style.width = '250px';
  }
  return style;
}

const handlerValueFormat = (f) => {
  if (f.format) {
    return f.format;
  }

  if (f.type == 'date' || f.type == 'dateRange') {
    return 'YYYY-MM-DD';
  }

  return 'YYYY-MM-D HH:mm:ss';
}

/**
 * 监听
 */
watch(() => props.columns, (value) => {
  setForm(value)
}, {immediate: true, deep: true})

defineExpose({setForm, getFormData})
</script>

<style scoped lang="less" type="text/less">
.x-search {
  .title {
    color: #606266;
    font-size: 14px;
  }

  .item {
    margin-bottom: 10px;
    padding-right: 30px;
    box-sizing: border-box;
  }
}
</style>
